<script setup lang="ts">
type Props = {
  title: string;
  value?: string;
  vertical?: boolean;
};

const props = defineProps<Props>();
</script>

<template>
  <div
    :class="[
      'text-sm',
      'font-mono',
      'bg-slate-100',
      'px-2',
      'py-1',
      'rounded',
      'overflow-x-auto',
      'flex',
      'gap-1',
      vertical ? 'flex-col' : 'flex-row'
    ]"
  >
    <span class="font-bold">{{ title }}:</span>
    <slot>
      <span>{{ value }}</span>
    </slot>
  </div>
</template>
<style lang="scss" scoped></style>
